<!--医院端--订单跟踪--批发采购订单列表--详情 -->
<template>
  <div class="auth-product">
    <el-container class="details-box">
      <!-- 列表 -->
      <el-header height="auto">
        <div class="formToptext">
          <el-form
            :inline="true"
            :model="formdata"
            ref="ruleForm"
            v-loading="formLoading"
            label-width="150px"
          >
            <el-form-item
              v-for="(item, index) in detailsDetailForm"
              :key="index"
              :label="item.title"
            >
              <div
                v-if="item.key === 'purchaseOrderStatus'"
                class="textBox">
                ：{{ statusArr[Number(formdata[item.key])] }}
              </div>
              <div
                v-else
                class="textBox">：{{ formdata[item.key] }}</div>
            </el-form-item>
          </el-form>
        </div>
      </el-header>
      <!-- 列表模块 -->
      <el-editable
        class="hospital-edit-box"
        :data="getList"
        height="200"
        v-loading="tableLoading"
        :columns="detailsTableData"
      >
        <!-- 订单数量/单位 -->
        <template
          slot="default-purchaseNum"
          slot-scope="scope">
          {{ scope.row.purchaseNum }}/{{ scope.row.unit }}
        </template>
      </el-editable>
      <!-- 分页模块 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
      />
    </el-container>
  </div>
</template>

<script>
import {
  detailsTableData,
  detailsDetailForm,
  statusArr,
  cardConfirmedColumns,
  cardSonConfirmedColumns
} from './const'
import SearchForm from '@components/businesscomponents/search'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import {
  getHospitalPurchaseOrderItem,
  getHospitalPurchaseOrderList,
  getByBsAddress,
  getHospitalFollowTableOne
} from '@const/beforeSettleApi'
import ElEditable from '@components/el-editable'
import { cloneDeep, isObject, hasIn } from 'lodash'
export default {
  components: { ElEditable, SearchForm },
  data () {
    return {
      // 订单状态
      statusArr,
      // 表单Loading
      formLoading: false,
      // 表格Loading
      tableLoading: false,
      // 表头
      detailsTableData,
      // 表格数据
      getList: [],
      // 表单编辑默认值
      formdata: {},
      // 表单 详情展示内容-table
      detailsDetailForm,
      // 详情ID
      detailsId: this.$route.query.id,
      IsshowTable: false,
      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0 // 总共的条数
    }
  },
  mounted () {
    let arr = [{ type: 'button', val: '返回', handle: this.back }]
    const btn = {
      type: 'btn',
      arr: arr
    }
    this.$store.commit('changeLayoutHandle', btn)
    this.getDetails()
    this.list()
  },

  methods: {
    // 点击返回
    back () {
      this.$router.go(-1)
    },

    // 获取详情数据
    getDetails () {
      // Loading加载开始
      this.formLoading = true
      // 请求列表数据
      this.$axios
        .$post(getHospitalPurchaseOrderList, {
          id: this.detailsId,
          page: 1,
          pageSize: 20
        })
        .then(res => {
          console.log(res)
          let content = isObject(res.payload.content) ? res.payload.content : []
          if (content.length) {
            this.formdata = content[0]
            this.ByBsAddress(content[0].receiveAddressId)
          }
          this.formLoading = false
        })
        .finally(res => {
          this.formLoading = false
        })
    },
    // 查询收货地址详情
    ByBsAddress (byId) {
      console.log('id', byId)
      this.$axios
        .$post(getByBsAddress + '?id=' + byId, {
          id: byId
        })
        .then(res => {
          let content = isObject(res.payload) ? res.payload : {}
          let str =
            content.province +
            content.city +
            content.area +
            content.detailedAddress
          this.$set(this.formdata, 'detailedAddress', str)
          this.$set(this.formdata, 'user_Name', content.userName)
          this.$set(this.formdata, 'user_Phone', content.userPhone)
        })
        .finally(res => {
          this.formLoading = false
        })
    },
    // 获取详情列表
    list () {
      // Loading加载开始
      this.tableLoading = true
      // 请求列表数据
      this.$axios
        .$post(getHospitalPurchaseOrderItem, {
          id: this.detailsId,
          page: this.curPage,
          pageSize: this.pageSize
        })
        .then(res => {
          let { content, totalElements } = isObject(res.payload)
            ? res.payload
            : {}
          this.getList = content
          this.totalElements = totalElements
          this.tableLoading = false
        })
        .finally(res => {
          this.tableLoading = false
        })
    },

    // 页码更改
    handleSizeChange (size) {
      this.pageSize = size
      this.list()
    },

    // 切换不一样的页面,重置一切数据
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.list()
    }
  }
}
</script>

<style lang="less">
.details-box {
  height: 100%;
  // overflow: auto;

  .addbutton {
    border: none;
    background: none;
    color: rgba(35, 113, 197, 1);
  }

  .submission {
    background: rgba(35, 113, 197, 1);
    border: 0;
    color: #fff;
    margin-bottom: 10px;
  }

  .topInput {
    width: 211px;
  }

  .pagination {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    padding-right: 0;
  }

  .formToptext {
    margin-bottom: 20px;

    .el-form-item {
      margin-right: 16px;
      margin-bottom: 16px;

      .textBox {
        width: 220px;
      }
    }

    .el-form-item__label {
      padding-right: 10px;
    }
  }
}
</style>
